This walkthrough provides step-by-step instructions to bind UXGridView to WCF RIA Services and displaying a collection of data using MVVM pattern.

In this walkthrough, you will perform the following tasks:

• Create ClientUI MVVM Data Application (WCF RIA SP1) project using Intersoft ClientUI MVVM Data Application (WCF RIA SP1) project template.
• Create the Model Repository class that represents the Customer data repository.
• Create the ViewModel class that describes the View.
• Bind the properties of UI controls in the View, such as the ItemsSource property of the UXGridView, to the ViewModel.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010 SP1
• WCF RIA SP1
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI 5 or later

Creating a new ClientUI MVVM Data Application (WCF RIA SP1) Project

The first step is to create a new ClientUI MVVM Data Application (WCF RIA SP1) project using Intersoft ClientUI MVVM Data Application (WCF RIA SP1) project template in Visual Studio.

To create the ClientUI MVVM Data Application (WCF RIA SP1) project

1. Start Visual Studio 2010.
2. Create a new ClientUI MVVM Data Application (WCF RIA SP1) project using Intersoft ClientUI MVVM Data Application (WCF RIA SP1) project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Data Application (WCF RIA SP1) Template.

Creating Model Repository Class

This section shows how to create the CustomersRepository class that represents the customer data repository used in this walkthrough.

To Create the CustomersRepository Model Class

1. Create a new data repository for Customers using Intersoft MVVM Data Repository (WCF RIA) item template under the ModelServices folder. You can name it CustomersRepository.cs
2. Replace the default base class in the DataRepository and remove the Validate method. If you would like to create a repository that supports editing, choose the EditableDataRepository as the base class instead of the DataRepository.
3. Replace all the <T> placeholders with the target entity type such as Customer.
4. Replace the type of the EntityContext property to the default domain context type such as NorthwindDomainContext.

Creating The View

This section steps you through the process of changing the existing customers pages by using a variety of ClientUI controls such as UXGridView and StylishLabel. The UXGridView is used to display a collection of customers data.

1. Open the existing Customers.xaml page.
2. Remove the default TextBlock inside Grid.
3. Add UXGridView control to the Grid after StylishLabel control.
   

   C#	Copy Code
   <Intersoft:DockPanel... > <Intersoft:StylishLabel... /> <Grid... > <Intersoft:UXGridView AutoGenerateColumns="False" QueryOperation="Server" CanUserAddRows="True" CanUserDeleteRows="True" CanUserEditRows="True" /> </Grid> </Intersoft:DockPanel>

   
   

Creating the ViewModel

This section steps you through the process of creating a ViewModel class that contains the properties to describe the View that you created in the previous section. The ViewModel will inherit the GridViewModelBase class which already contains a set of common properties that will be used in UXGridView such as Items. You can also choose to inherit from EditableGridViewModelGenericBase to create a ViewModel that supports data editing features such as add, edit and delete.

To create the CustomersViewModel

1. Add a new class to the ViewModels folder in your Silverlight project and name it CustomersViewModel.
2. Open CustomersViewModel.cs and inherit the class from GridViewModelBase class, then replace the placeholders with the target entity type, i.e., <Customer>. The GridViewModelBase class contains common members that can be bound to the UXGridView control.
   

   C#	Copy Code
   public class CustomersViewModel : GridViewModelBase<Customer> { }

3. Override the DataSource property from the base class and change the getter for this property to CustomersRepository.Instance.
   

   C#	Copy Code
   public class CustomersViewModel : GridViewModelBase<Customer> { protected override IDataRepository DataSource { get { return CustomersRepository.Instance; } } }

4. Create a constructor and call the LoadData method to get the customers data.
   

   C#	Copy Code
   public class CustomersViewModel : GridViewModelBase<Customer> { public CustomersViewModel() { this.LoadData(); } protected override IDataRepository DataSource { get { return CustomersRepository.Instance; } } }

Binding the View to the ViewModel

In the previous sections, you have learned how to create the Model and ViewModel classes, as well as the View that contains the user interface and controls used in this walkthrough. This section shows how to instantiate the ViewModel in the XAML page and bind the UI elements to the properties in the ViewModel such as the data context and UXGridView ItemSource property.

To bind the Customers page to the CustomersViewModel class

1. Declare the namespace that maps to the CustomersViewModel class in the Customers page.
   

   XAML	Copy Code
   <Intersoft:UXPage... xmlns:ViewModels="clr-namespace:BindGridViewUsingWCFRIASP1.ViewModels"> </Intersoft:UXPage>

2. Instantiate a new instance of the CustomersViewModel class in the UXPage resources and name it CustomersViewModel.
   

   XAML	Copy Code
   <Intersoft:UXPage.Resources> <ViewModels:CustomersViewModel x:Key="CustomersViewModel" /> ... </Intersoft:UXPage.Resources> <Grid x:Name="LayoutRoot" DataContext="{StaticResource CustomersViewModel}"> </Grid>

3. In UXGridView control bind the ItemsSource property with Items property from CustomersViewModel.
   

   XAML	Copy Code
   <Intersoft:UXGridView ItemsSource="{Binding Path=Items}" />

   
   
4. Finally, save and run the project.

Conclusion

In this walkthrough, you have learned how to create ClientUI MVVM Data Application (WCF RIA SP1) using project template, and create the classes and page based on the Model, View and ViewModel pattern. You also learned how to bind UXGridView to a collection of data.

Complete Code Listing

This section lists the complete code used in this walkthrough.

CustomersRepository.cs

using System.ComponentModel.DataAnnotations;
using System.ServiceModel.DomainServices.Client;
using BindGridViewUsingWCFRIASP1.Web;

namespace BindGridViewUsingWCFRIASP1.ModelServices
{
    // TODO: Replace all the <T> placeholders with the target entity type. I.e.: <Product>

    /// <summary>
    /// Represents the CustomersRepository class.
    /// </summary>
    public class CustomersRepository : DataRepository<Customer>
    {
        private static IDataRepository _repository;

        /// <summary>
        /// Initializes a new instance of <see cref="CustomersRepository"/> class.
        /// </summary>
        /// <param name="context">A <see cref="DomainContext"/> instance, providing access to all functionality of the data service.</param>
        public CustomersRepository(DomainContext context)
            : base(context)
        {
        }

        private static bool IsReusable
        {
            get { return true; }
        }

        // TODO: Replace DomainContext with the target DomainContext type.
        // I.e., NorthwindDomainContext
        private NorthwindDomainContext EntityContext
        {
            get
            {
                return ((NorthwindDomainContext)this.Context);
            }
        }

        /// <summary>
        /// Returns an instance of <see cref="CustomersRepository"/>. 
        /// If the <see cref="IsReusable"/> is true, the property will return an existing cached copy of the instance.
        /// </summary>
        public static IDataRepository Instance
        {
            get
            {
                if (_repository == null || !IsReusable)
                    _repository = new CustomersRepository(RepositoryManager.Create());

                return _repository;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntitySet"/> that provides access to a collection of entities as the results of the entity query.
        /// </summary>
        public override EntitySet<Customer> EntitySet
        {
            get
            {
                // TODO: Replace Products with the actual EntitySet property.
                return this.EntityContext.Customers;
            }
        }

        /// <summary>
        /// Gets the <see cref="EntityQuery"/> that represents the entity's LINQ query.
        /// </summary>
        public override EntityQuery<Customer> EntityQuery
        {
            get
            {
                // TODO: Replace GetProductsQuery with the actual query method.
                return this.EntityContext.GetCustomersQuery();
            }
        }
    }
}

CustomersViewModel.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using BindGridViewUsingWCFRIASP1.Web;
using BindGridViewUsingWCFRIASP1.ModelServices;

namespace BindGridViewUsingWCFRIASP1.ViewModels
{
    public class CustomersViewModel : GridViewModelBase<Customer>
    {
        public CustomersViewModel()
        {
            this.LoadData();
        }


        protected override IDataRepository DataSource
        {
            get
            {
                return CustomersRepository.Instance;
            }
        }
    }
}

Customers.xaml

<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
    xmlns:ViewModels="clr-namespace:BindGridViewUsingWCFRIASP1.ViewModels"
        x:Class="BindGridViewUsingWCFRIASP1.Views.Customers" 
        Title="Customers Page"
        d:DesignWidth="800" d:DesignHeight="600"
    Style="{StaticResource CommonPageStyle}">
    <Intersoft:UXPage.Resources>
        <ViewModels:CustomersViewModel x:Key="CustomersViewModel" />
    </Intersoft:UXPage.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource CustomersViewModel}">
                <Grid.Background>
                        <ImageBrush AlignmentY="Bottom" AlignmentX="Right" Stretch="None" Opacity="0.5" ImageSource="../Assets/Images/CustomersFolderLarge.png">
                                <ImageBrush.Transform>
                                        <TranslateTransform X="40" Y="40"/>
                                </ImageBrush.Transform>
                        </ImageBrush>
                </Grid.Background>
        <Intersoft:DockPanel Margin="10" FillChildMode="Custom">
            <Intersoft:StylishLabel Content="Customers Page" Intersoft:DockPanel.Dock="Top" Style="{StaticResource PageHeaderStyle}"/>
            <Grid Intersoft:DockPanel.IsFillElement="True">
                <Intersoft:UXGridView ItemsSource="{Binding Path=Items}" />
            </Grid>
        </Intersoft:DockPanel>
    </Grid>
</Intersoft:UXPage>